<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模态框实现</title>
	<link rel="stylesheet" href="css\modal.css" type="text/css">
</head>
<body>
<button class="btn" id="showModel">模态框展示</button>
<div id="modal" class="modal">
	<div class="modal-content">
		<header class="modal-header">
			<h4>模态框标题</h4>
			<span class="close">×</span>
		</header>
		<div class="modal-body">
			<p>HTML+CSS+JS原生实现响应式模态框演示！</p>
		</div>
		<footer class="modal-footer">
			<button id="cancel">取消</button>
			<button id="sure">确定</button>
		</footer>
	</div>
</div>
</body>
<script>
    var btn = document.getElementById('showModel');
    var close = document.getElementsByClassName('close')[0];
    var cancel = document.getElementById('cancel');
    var modal = document.getElementById('modal');
    btn.addEventListener('click', function(){
        modal.style.display = "block";
    });
    close.addEventListener('click', function(){
        modal.style.display = "none";
    });
    cancel.addEventListener('click', function(){
        modal.style.display = "none";
    });
</script>
</html>